<div class="inmodal">
    <div class="modal-header">
        <h4 class="modal-title">{{operation | translate}}(ID:{{energyflowdiagramlink.id}})</h4>
    </div>
    <div class="modal-body">
        <form role="form" name="form_energyflowdiagramlink" novalidate class="form-horizontal">
            <div class="form-group" ">
              <label class="col-sm-4 control-label">{{'ENERGY_FLOW_DIAGRAM.SOURCE_NODE' | translate}}</label>
                <div class="col-sm-8">
                    <ui-select ng-model="energyflowdiagramlink.source_node.id" name="energyflowdiagramlink.source_node_id" theme="bootstrap" required>
                        <ui-select-match allow-clear="false" placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="node.id as node in energyflowdiagramnodes | filter: $select.search">
                            <div ng-bind-html="node.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                    <div class="m-t-xs" ng-show="form_energyflowdiagramlink.source_node_id.$invalid && form_energyflowdiagramlink.source_node_id.$dirty">
                        <small class="text-danger" ng-show="form_energyflowdiagramlink.source_node_id.$error.required">{{'ENERGY_FLOW_DIAGRAM.SELECT_SOURCE_NODE' | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="hr-line-dashed" "></div>
            <div class="form-group" ">
              <label class="col-sm-4 control-label">{{'ENERGY_FLOW_DIAGRAM.TARGET_NODE' | translate}}</label>
                <div class="col-sm-8">
                    <ui-select ng-model="energyflowdiagramlink.target_node.id" name="energyflowdiagramlink.target_node_id" theme="bootstrap" required>
                        <ui-select-match allow-clear="false" placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="node.id as node in energyflowdiagramnodes | filter: $select.search">
                            <div ng-bind-html="node.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                    <div class="m-t-xs" ng-show="form_energyflowdiagramlink.target_node_id.$invalid && form_energyflowdiagramlink.target_node_id.$dirty">
                        <small class="text-danger" ng-show="form_energyflowdiagramlink.target_node_id.$error.required">{{'ENERGY_FLOW_DIAGRAM.SELECT_TARGET_NODE' | translate}}</small>
                    </div>
                </div>
            </div>
            <div class="hr-line-dashed" "></div>
            <div class="form-group" ">
              <label class="col-sm-4 control-label">{{'ENERGY_FLOW_DIAGRAM.METER' | translate}}</label>
                <div class="col-sm-8">
                    <ui-select ng-model="energyflowdiagramlink.meter.uuid" name="energyflowdiagramlink.meter_uuid" theme="bootstrap" required>
                        <ui-select-match allow-clear="false" placeholder="{{'COMMON.PLACEHOLDER' | translate}}">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="meter.uuid as meter in mergedmeters  | filter: $select.search">
                            <div ng-bind-html="meter.name | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-white" ng-click="cancel()">{{'SETTING.CANCEL' | translate}}</button>
        <button type="button" ng-disabled="form_energyflowdiagramlink.$invalid" class="btn btn-primary" ng-click="ok()">{{'SETTING.SAVE' | translate}}</button>
    </div>
</div>
